<!--
 * @Author: 黄达全
 * @Date: 2024-08-04 17:46:00
 * @LastEditTime: 2024-08-06 15:58:19
-->
<script lang="ts" setup>
import { imageApi } from "@/api/model/image"
import tool from "@/utils/tool"
import { JwtTokenConstant } from "@/common/constant"
import type { UploadFile, UploadFiles } from "element-plus"
import useElementPlus from "@/hooks/useElementPlus"
import type {ImageUploadResponse} from "@/common/type"
import { ref } from "vue"

const token = tool.data.get(JwtTokenConstant.token)

const emits = defineEmits(['success'])

const uploadSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    emits("success", {
        response,
        uploadFile,
        uploadFiles
    } as ImageUploadResponse )
}
const { message } = useElementPlus()
const uploadError = (error: Error) => {
    let msg = JSON.parse(error.message).msg || "上传失败"
    message({
        message: msg,
        type: "error"
    })
}

const uploadRef=ref()
// 清空文件列表
const clearFiles = () => {
    uploadRef.value.clearFiles()
}

defineExpose({
    clearFiles,
    a:1
})
</script>

<template>
    <el-upload drag :action="imageApi" multiple :headers="{
        [JwtTokenConstant.token]: token
    }" :on-success="uploadSuccess" :on-error="uploadError" ref="uploadRef">
        <el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
        <div class="el-upload__text">将文件放在此处或<em>单击上传</em></div>
        <template #tip>
            <div class="el-upload__tip">JPG/PNG文件应小于500kb</div>
        </template>
    </el-upload>
</template>
